<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script type="text/javascript" src="md5.js"></script>
	<script type="text/javascript" src="axios.min.js"></script>
	<script type="text/javascript" src="qs.min.js"></script>
	<style type="text/css">
		.body{
			width: 100%;
			height: 800px;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			font-size: 15px;
			color: white;
		}
		.register{
			width: 600px;
			height: 400px;
			display: flex;
			justify-content: center;
			align-items: center;
			border-top: 1px solid #7f8c8d;
		}
		tr div{
			display: flex;
			width: 100%;
			height: 50px;
			justify-content: center;
			align-items: center;
		}
		button{
			width: 100px;
			height: 50px;
			background-color: #3498db;
			border: 0px;
			color: white;
			border-radius: 2px;
		}
		button:focus{
			outline: none;
		}
		button:hover{
			background-color: #0984e3;
			cursor: pointer;
		}
		.input-box{
			height: 28px;
			width: 200px;
			color: #dfe6e9;
			font-size: 20px;
			border-radius: 2px;
			border: 0px;
			background-color: rgba(100%,100%,100%,0.3);
		}
		input:focus{
			outline: none;
		}
	</style>
</head>
<body style="background-image: url(background5.jpg);background-repeat: no-repeat;background-size: cover;">
	<div class="body">
		<div style="text-align: left;width: 600px;">
			<span style="line-height: 40px;font-size: 30px;">用户注册</span>
		</div>
		<div class="register">
			<table>
				<tr>
					<td>手机号: </td>
					<td>
						<div>
							<input id="telephone" type="text" name="" class="input-box">
						</div>
					</td>
					<td>11位有效号码,用于登陆账号</td>
				</tr>
				<tr>
					<td>用户密码</td>
					<td>
						<div>
							<input id="password1" type="password" name="" class="input-box">
						</div>
					</td>
					<td>不少于8位,由字母和数字组成</td>
				</tr>
				<tr>
					<td>确认密码</td>
					<td>
						<div>
							<input id="password2" type="password" name="" class="input-box">
						</div>
					</td>
					<td>不少于8位,由字母和数字组成</td>
				</tr>
				<tr>
					<td>用户姓名: </td>
					<td>
						<div>
							<input id="username" type="text" name="" class="input-box">
						</div>
					</td>
					<td>不能为空</td>
				</tr>
				<tr>
					<td>身份证号: </td>
					<td>
						<div>
							<input id="identity" type="text" name="" class="input-box">
						</div>
					</td>
					<td>有效的身份证号码</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td>
						<div>
							<button onclick="register()">立即注册</button>
						</div>
					</td>
					<td>&nbsp;</td>
				</tr>
			</table>
		</div>
	</div>
	<script type="text/javascript">
		function register(){
			let qs = Qs;
			let telephone = document.getElementById("telephone").value;
			let password1 = document.getElementById("password1").value;
			let password2 = document.getElementById("password2").value;
			let username = document.getElementById("username").value;
			let identity = document.getElementById("identity").value;
			console.log("telephone:" + telephone);
			console.log("password1:" + password1);
			console.log("password2:" + password2);
			console.log("转换为md5的password:" + hex_md5(password1));
			console.log("username:" + username);
			console.log("identity:" + identity);
			//开头是1,第二位是3/4/5/7/8中一位,其它9位在0-9之间
			let telephoneTest = /^1[3|4|5|7|8][0-9]{9}/;
			let passwordTest = /([0-9a-zA-Z]{7,30})/;
			let identityTest = /[0-9]{18}/
			let flag = true;
			if(!telephoneTest.test(telephone)){
				alert("手机号错误!");
				flag = false;
			}
			else if(password1 != password2){
				alert("两次密码不一致!");
				flag = false;
			}
			else if(!passwordTest.test(password1)){
				alert("密码不合法!");
				flag = false;
			}
			else if(username == ""){
				alert("用户名不为空!")
				flag = false;
			}
			else if(!identityTest.test(identity)){
				alert("身份证验证失败!");
				flag = false;
			}
			let ans = flag==true?"验证通过":"验证失败";
			alert(ans);
			if(flag == false){
				return;
			}
			window.location = "./garbageClassification.html";
			axios.post('http://47.100.90.132',qs.stringify({
				username:username,
				password1:password1,
				username:username,
				identity:identity
			}))
		}
	</script>
</body>
</html>